<template>
  <div class="goodinfo" v-if="Object.keys(detailInfo).length!==0">
       <div>{{detailInfo.desc}}</div>
       <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
       <div class="info-list">
         <img v-for="(item,index) in detailInfo.detailImage[0].list"
              :src="item" alt="" :key="index" @load="imgLoad">
       </div>
  </div>
</template>

<script>
  export default {
    name: "DetailGoodsInfo",
    props:{
      detailInfo:{
        type:Object
      }
    },
    data(){
      return{
        counter:0,
        imagesLength:0
      }
    },
    methods:{
      imgLoad(){
        //判断图片是否加载玩
        if(++this.counter===this.imagesLength){
           this.$emit('imageLoad')
        }
      }
    },
    whatch:{
       //获取图片的个数
       detailInfo(){
         this.imagesLength=this.detailInfo.detailImage[0].list.length;
       }
    }
  }
</script>

<style scoped>
  .goodinfo{
    margin-top: 49px;
    position: relative;
    padding-right: 10px;
    padding-left: 10px;
  }
  .info-list img {
    width: 100%;
  }
</style>
